<template>
    <div>
    <el-form :model="Form"  :rules="rule" ref="Form">
        <el-form-item label="需要更改的账号" prop="userName">
            <el-input v-model="Form.userName" placeholder="请输入账号"></el-input>
        </el-form-item><br/>
        <el-form-item label="重置后的密码"  prop="password">
            <el-input v-model="Form.password" placeholder="请输入密码"></el-input>
        </el-form-item><br/>
        <el-form-item label="再次输入密码"  prop="passwordsecond">
            <el-input v-model="Form.passwordsecond" placeholder="请再次入密码"></el-input>
        </el-form-item><br/>
        <el-form-item>
            <el-button type="primary"  @click="shuaxin()">刷新</el-button>
            <el-button type="primary" @click="edit('Form')">确认修改</el-button>
        </el-form-item>

    </el-form>
    </div>
</template>

<script>
    export default {
        name: "EditPassword",
        data(){
            var checkPassword =(rule,value,cb)=>{

                if(this.Form.password!=this.Form.passwordsecond){
                    return cb(new Error('两次输入密码不一致'));
                }else {
                    cb();
                }
            }
            return{
                rule: {
                    userName:[
                        {
                            required: true, message: '账号不能为空', trigger: 'blur'
                        },
                    ],
                    password: [
                        {
                            required: true, message: '密码不能为空', trigger: 'blur'
                        },
                        {
                            min: 8, max: 16, message: '长度在 8 到 16 个字符'
                        },
                        {
                            pattern:  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/, message: '至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符'
                        }
                    ],
                    passwordsecond: [
                        {
                            validator: checkPassword ,  trigger: 'blur'
                        }
                    ],

                },
                Form:{
                    userName:"",
                    password:"",
                    passwordsecond:"",
                }
            }
        },
        methods:{
            suodingUser(){
                var that = this
                that.Form.userName=sessionStorage.getItem("username");
            },
            shuaxin(){
                this.Form={}
            },
          edit(Form){
              this.$refs[Form].validate((valid) => {
                  if(valid){
                      var that =this;
                      this.$http.put(`system/menu/editPassword`,this.Form).then(r=>{
                          this.$message.success("修改成功，请重新登录")
                          sessionStorage.removeItem("token");
                          this.$router.push("login");
                      })
                  }else{
                      this.$message.error("请按规范填写表中数据")
                  }

              })
          },
        },
        mounted(){
            this.suodingUser()
        },

    }
</script>

<style scoped>

</style>